<script lang="ts" setup>
import { onMounted, onBeforeUnmount, defineProps, defineEmits, ref } from "vue";
import { useElementDragable } from "@/hook/vDrag.tsx";

enum PopUpEnum {
  isTitleSolt = "是否启动插槽标题",
  titleName = "title名称",
}
enum PropsData{
  PopupData = 'PopUpEnum',
  width='宽',
  height='高',
  top='上边距',
  left='左边距'
}

import { Close } from "@element-plus/icons-vue";

let props = defineProps(["PopupData", "width", "height", "top", "left"]);

let emits = defineEmits(["close"]);
// 弹出框的元素
let basePopup = ref();
// 弹出框的标题元素
let basePopupTitle = ref();
// 拉伸元素
let stretchingRef = ref();

// 初始化弹出框的样式
const inialElementStyle = () => {
  let element = basePopup.value;
  let { width, height, top, left } = props;
  width && (element.style.width = width + "px");
  height && (element.style.height = height + "px");
  top && (element.style.top = top + "px");
  left && (element.style.left = left + "px");
};
// 拖拽的类
let useDragable: useElementDragable;
onMounted(() => {
  useDragable = new useElementDragable(basePopupTitle.value, basePopup.value,stretchingRef.value);
  inialElementStyle();
});

onBeforeUnmount(() => {
  useDragable.destroy();
});

const close = () => {
  props.PopupData.onclose?.();
  emits("close");
};
</script>
<template>
  <div class="basePopup" ref="basePopup">
    <div class="basePopupAfter">
      <div class="PopupTitle" ref="basePopupTitle">
        <div v-if="PopupData.isTitleSolt">
          <slot name="title"></slot>
        </div>
        <div class="defaultTitle">
          <span>{{ PopupData.titleName }}</span>
          <i class="defaultTitle_i" @click="close"><Close /></i>
        </div>
      </div>
      <div class="PopupContent">
        <slot></slot>
      </div>
      <div class="PopupFooter">
        <slot name="footer"></slot>
      </div>
      <div class="stretching" ref="stretchingRef">

      </div>
    </div>
  </div>
</template>
<style scoped>
.basePopup {
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: rgb(12 113 224 / 65%);
  border-radius: 6px;
  overflow: hidden;
}
.basePopupAfter{
  width: 100%;
  height: 100%;
  position: relative;
}
.PopupTitle {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  color: #fff;
  background-color: #115d78;
  cursor: move;
}
.PopupContent {
  margin: 3px;
}
.defaultTitle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.defaultTitle span {
  width: calc(100% - 30px);
  text-indent: 10px;
  font-size: 15px;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.defaultTitle_i {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}
.stretching{
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: #182ff2;
  width: 10px;
  height: 10px;
  cursor: nw-resize;
}
</style>
